<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <!-- jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
        <span th:if="${user eq null}"> 您还没有登录，请登陆后再操作<br/></span>
        <span>没有收货地址的提示。。。</span>
    </div>
    <table class="table" id="goods">
        <tr>
            <td>商品名称</td>
            <td colspan="3" th:text="${goods.goodsName}"></td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td colspan="3"><img th:src="@{${goods.goodsImg}}" width="200" height="200"/></td>
        </tr>
        <tr>
            <td>秒杀开始时间</td>
            <td th:text="${#dates.format(goods.startDate,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td >
<!--                <input type="hidden" id="remainSeconds" th:value="${remainSeconds}">-->
                <span th:if="${secKillStatus eq 0}" id="seckillTip">秒杀倒计时:
                    <span id="countDown"></span>
                </span>
                <span th:if="${secKillStatus eq 1}">秒杀进行中</span>
                <span th:if="${secKillStatus eq 2}">秒杀已结束</span>
            </td>
            <td>
                <form id="secKillForm" method="get" action="" th:style="${secKillStatus eq 1 ?'':'display: none'}">
                    <img  th:src="${secKillStatus eq 1?'/seckill/captcha?goodsId='+goods.id:''}" title="看不清换一张" id="captchaImg"/>
                    <input type="text" id="captcha" placeholder="请输入验证码"/>
                    <input type="hidden" id="goodsId" name="goodsId" th:value="${goods.id}">
                    <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="getSeckillPath()">立即秒杀</button>
                </form>
            </td>
        </tr>
        <tr>
            <td>商品原价</td>
            <td colspan="3" th:text="${goods.goodsPrice}"></td>
        </tr>
        <tr>
            <td>秒杀价</td>
            <td colspan="3" th:text="${goods.seckillPrice}"></td>
        </tr>
        <tr>
            <td>库存数量</td>
            <td colspan="3" th:text="${goods.seckillCount}"></td>
        </tr>
    </table>
</div>
</body>
<script>
    //防君子不防小人的秒杀倒计时
    //将就用吧，重点不在这里
    var startDate="[[${startTime}]]";
    var endDate="[[${endTime}]]"
    window.onload=clock;
    var time;
    function clock(){
        var today=new Date();//当前时间
        var shenyu=parseInt(startDate)-today.getTime(),//倒计时毫秒数

            shengyuD=parseInt(shenyu/(60*60*24*1000)),//转换为天

            D=parseInt(shenyu)-parseInt(shengyuD*60*60*24*1000),//除去天的毫秒数

            shengyuH=parseInt(D/(60*60*1000)),//除去天的毫秒数转换成小时

            H=D-shengyuH*60*60*1000,//除去天、小时的毫秒数

            shengyuM=parseInt(H/(60*1000)),//除去天的毫秒数转换成分钟

            M=H-shengyuM*60*1000;//除去天、小时、分的毫秒数

        S=parseInt((shenyu-shengyuD*60*60*24*1000-shengyuH*60*60*1000-shengyuM*60*1000)/1000)//除去天、小时、分的毫秒数转化为秒
        if(shengyuD==0&&shengyuH==0&&shengyuM==0&&S==0){
            clearTimeout(time);
            $("#seckillTip").hide();
            $("#secKillForm").show();
            $('#captchaImg').attr("src","/seckill/captcha?goodsId="+$('#goodsId').val());
        }
        document.getElementById("countDown").innerHTML=(shengyuD+"天"+shengyuH+"小时"+shengyuM+"分"+S+"秒"+"<br>");

        // setTimeout("clock()",500);

       time =setTimeout(clock,500);

    }

    function getSeckillPath(){
        var goodsId = $("#goodsId").val();
        var captcha = $("#captcha").val();
        if (captcha.length<1) {
            layer.msg("请填写验证码！");
            return;
        }
            $.ajax({
                url:"/seckill/path",
                data: {"goodsId":goodsId,"captcha":captcha},
                type:"GET",
                success:function (e){
                    if (e.code==200){
                        var uri = e.object;
                        $("#secKillForm").attr("action","/seckill/doSeckill/"+uri).submit();
                    }else {
                        layer.msg(e.message);
                        $("#captchaImg").click();
                    }
                }
            })

    }

    $('#captchaImg').click(function (){
        $(this).attr("src","/seckill/captcha?goodsId="+$('#goodsId').val()+"&date="+new Date().getTime());
    })


    // $(function () {
    //     countDown();
    // });

    // function countDown() {
    //     var remainSeconds = $("#remainSeconds").val();
    //     var timeout;
    //     //秒杀还未开始
    //     if (remainSeconds > 0) {
    //         $("#buyButton").attr("disabled", true);
    //         timeout = setTimeout(function () {
    //             $("#countDown").text(remainSeconds - 1);
    //             $("#remainSeconds").val(remainSeconds - 1);
    //             countDown();
    //         }, 1000);
    //         // 秒杀进行中
    //     } else if (remainSeconds == 0) {
    //         $("#buyButton").attr("disabled", false);
    //         if (timeout) {
    //             clearTimeout(timeout);
    //         }
    //         $("#seckillTip").html("秒杀进行中")
    //     } else {
    //         $("#buyButton").attr("disabled", true);
    //         $("#seckillTip").html("秒杀已经结束");
    //     }seckillCount
    // };

</script>
</html>